<template>
    <div>
        <el-radio-group v-model="imageData.typeId" size="small" @change="getImageType">
            <el-radio-button
                :label="item.type"
                v-for="item in imagesGroup"
                :key="item.type"
            >{{item.lable}}</el-radio-button>
        </el-radio-group>
        <div class="imgesList" v-loading="loading">
            <el-upload
                ref="upload"
                name="files"
                :limit="20"
                :action="GLOBAL.urlRoot+ GLOBAL.productService + '/productFile/saveFiles'"
                :data="imageData"
                :on-remove="handleRemove"
                :file-list="documentList"
                :auto-upload="false"
                multiple
                :before-remove="beforeRemove"
                :on-success="onSuccess"
                :on-error="uploadError"
                :on-exceed="uploadExceed"
                :on-change="handleChange"
                accept=".txt, .doc, .docx, .xls, .htm, .html, .jsp, .rtf, .wpd, .pdf, .ppt, js, .md, .csv.mp4, .avi, .mov, .wmv, .asf, .navi, .3gp, .mkv, .f4v, .rmvb, .webm.mp3, .wma, .wav, .mod, .ra, .cd, .asf, .aac, .vqf, .ape, .mid, .ogg, .m4a, .vqf"
            >
                <div class="backBorder">
                    <i class="el-icon-plus"></i>
                </div>
            </el-upload>
        </div>
        <el-button
            type="primary"
            size="small"
            @click="uploadImg"
            :disabled="updLoading"
            :icon="updLoading?'el-icon-loading':'el-icon-upload2'"
        >上传文件</el-button>
        <el-button
            type="success"
            size="small"
            @click="downloadIamge"
            :disabled="downLoading"
            :icon="downLoading?'el-icon-loading':'el-icon-download'"
        >下载文件</el-button>
    </div>
</template>   
<script>
const ERR_OK = 200;
export default {
    props: {
        basicInfo: Object
    },
    data() {
        return {
            imageData: {
                typeId: 1
            },
            documentList: [],
            dialogImageUrl: "",
            updLoading: false,
            downLoading: false,
            loading:true
        };
    },
    created() {
        this.imageData.productId = this.basicInfo.productId;
        this.getImageType();
    },
    computed: {
        imagesGroup() {
            return [
                {
                    lable: this.$t("m.button.productListingCopy"),
                    type: 1
                },
                {
                    lable: this.$t("m.button.productDefinitionDocument"),
                    type: 2
                },
                {
                    lable: this.$t("m.button.certificationDocuments"),
                    type: 3
                },
                {
                    lable: this.$t("m.button.structureFile"),
                    type: 4
                },
                {
                    lable: this.$t("m.button.projectInformation"),
                    type: 5
                },
                {
                    lable: this.$t("m.button.representationDocument"),
                    type: 6
                },
                {
                    lable: this.$t("m.button.other"),
                    type: 7
                }
            ];
        }
    },
    methods: {
        getImageType() {
            this.loading = true
            this.$ajax({
                method: "get",
                url:
                    this.GLOBAL.productService +
                    "/productFile/findByProductIdAndTypeId?productId=" +
                    this.basicInfo.productId +
                    "&typeId=" +
                    this.imageData.typeId +
                    "&fileType=DOCUMENT"
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.documentList = res.data.data;
                }
                this.loading = false
            });
        },
        uploadImg() {
            if (
                this.$refs.upload.uploadFiles.find(
                    item => !item.productDocumentId
                )
            ) {
                this.updLoading = true;
            }
            this.$refs.upload.submit();
        },
        onSuccess(res) {
            if (res.code === ERR_OK) {
                this.$message.success("上传成功");
            } else {
                this.$message.error(res.msg);
            }
            this.getImageType();
            this.updLoading = false;
        },
        uploadError(err, file, fileList) {
            this.updLoading = false;
            this.$message.error("上传出错,请重新上传----" + err);
        },
        uploadExceed(file, fileList) {
            this.$message.warning(
                `当前限制选择 20 个文件，本次选择了 ${
                    file.length
                } 个文件，共选择了 ${file.length + fileList.length} 个文件`
            );
        },
        handleChange(file, fileList) {
            const isLt2M = file.size / 1024 / 1024 < 20;
            if (!isLt2M) {
                this.$message.error("上传文件大小不能超过 20MB!");
            }
        },
        //删除
        beforeRemove(file, fileList) {
            if (!file.productDocumentId) {
                return true;
            }
            return new Promise((resolve, reject) => {
                this.$confirm("是否确定删除文件!", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.$ajax({
                            method: "post",
                            url:
                                this.GLOBAL.productService +
                                "/productFile/dropFiles?fileIds=" +
                                file.productDocumentId +
                                "&fileType=DOCUMENT"
                        }).then(res => {
                            if (res.data.code === ERR_OK) {
                                this.$message.success("删除成功");
                                resolve(true);
                            } else {
                                reject(false);
                                this.$message.error(res.data.msg);
                            }
                        });
                    })
                    .catch(() => {
                        reject(false);
                    });
            });
        },
        handleRemove(file, fileList) {},
        // 文件下载
        downloadIamge() {
            this.downLoading = true;
            let productDocumentId = this.documentList.map(item => item.productDocumentId);
            this.$ajax({
                method: "get",
                url:
                    this.GLOBAL.productService +
                    "/productFileDownload/zipDownload",
                params: {
                    ids: productDocumentId.join(),
                    type: "DOCUMENT"
                }
            }).then(res => {
                this.downLoading = false;
                if (res.status === ERR_OK) {
                    open(res.request.responseURL);
                    this.$message.success(res.data.data);
                }
            });
        }
    }
};
</script>
<style lang="stylus" scoped>
.imgesList {
    margin: 10px 0;
    overflow: auto;
}

.backBorder {
    padding: 15px;
    font-size: 20px;
    color: #666;
    border: 1px dashed #ccc;
    border-radius: 5px;
}
</style>